<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-left"></view>
      <view class="nav-title">值班情况</view>
      <view class="nav-right">
        <image class="nav-icon" src="/static/image/更多功能.png" mode="aspectFit"></image>
      </view>
    </view>

    <!-- 日期选择器 -->
    <view class="date-selector">
      <image @click="previousDay" class="date-icon" src="/static/image/值班安排.png" mode="aspectFit"></image>
      <text class="current-date">{{ currentDate }}</text>
      <image @click="nextDay" class="date-icon" src="/static/image/换班申请.png" mode="aspectFit"></image>
    </view>

    <!-- 值班人员列表 -->
    <view class="duty-list">
      <!-- A校区 -->
      <view class="campus-section">
        <view class="campus-title">
          <text>A校区</text>
          <text class="person-count">{{ aCampusCount }}人</text>
        </view>
        <view class="duty-items">
          <view v-for="(item, index) in aCampusDutyList" :key="index" class="duty-item">
            <view class="duty-header">
              <image class="cert-icon" src="/static/image/值班安排.png" mode="aspectFit"></image>
              <text class="person-name">{{ item.name }}</text>
              <image @click="makeCall(item.phone)" class="call-icon" src="/static/image/换班申请.png" mode="aspectFit"></image>
            </view>
            <view class="duty-info">
              <text class="info-text">值班时间: {{ item.startTime }}-{{ item.endTime }}</text>
              <text class="info-text">值班校区: {{ item.campus }}</text>
              <text class="info-text">值班地点: {{ item.location }}</text>
              <text class="info-text">值班状态: {{ item.status }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- B校区 -->
      <view class="campus-section">
        <view class="campus-title">
          <text>B校区</text>
          <text class="person-count">{{ bCampusCount }}人</text>
        </view>
        <view class="duty-items">
          <view v-for="(item, index) in bCampusDutyList" :key="index" class="duty-item">
            <view class="duty-header">
              <image class="cert-icon" src="/static/image/值班安排.png" mode="aspectFit"></image>
              <text class="person-name">{{ item.name }}</text>
              <image @click="makeCall(item.phone)" class="call-icon" src="/static/image/换班申请.png" mode="aspectFit"></image>
            </view>
            <view class="duty-info">
              <text class="info-text">值班时间: {{ item.startTime }}-{{ item.endTime }}</text>
              <text class="info-text">值班校区: {{ item.campus }}</text>
              <text class="info-text">值班地点: {{ item.location }}</text>
              <text class="info-text">值班状态: {{ item.status }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部导航栏 -->
    <view class="nav-bar-bottom">
      <view class="nav-item active" @click="navigateToDutyStatus">
        <image class="nav-icon-bottom" src="/static/image/值班安排.png" mode="aspectFit"></image>
        <text class="nav-text">值班安排</text>
      </view>
      <view class="nav-item" @click="navigateToMoreFunctions">
        <image class="nav-icon-bottom" src="/static/image/更多功能.png" mode="aspectFit"></image>
        <text class="nav-text">更多功能</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentDate: '',
      aCampusDutyList: [],
      bCampusDutyList: [],
      aCampusCount: 0,
      bCampusCount: 0
    }
  },
  onLoad() {
    this.setCurrentDate();
    this.loadDutyData();
  },
  methods: {
    setCurrentDate() {
      const date = new Date();
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      this.currentDate = `${year}年${month}月${day}日`;
    },
    previousDay() {
      // 实现前一天功能
      const date = new Date(this.currentDate);
      date.setDate(date.getDate() - 1);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      this.currentDate = `${year}年${month}月${day}日`;
      this.loadDutyData();
    },
    nextDay() {
      // 实现后一天功能
      const date = new Date(this.currentDate);
      date.setDate(date.getDate() + 1);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      this.currentDate = `${year}年${month}月${day}日`;
      this.loadDutyData();
    },
    loadDutyData() {
      // 模拟加载数据
      this.aCampusDutyList = [
        {
          name: '张三',
          phone: '13800138001',
          startTime: '2025-02-24 18:00:00',
          endTime: '2025-02-25 08:00:00',
          campus: 'A校区',
          location: '学生活动中心A305',
          status: '正常在岗'
        },
        {
          name: '李四',
          phone: '13800138002',
          startTime: '2025-02-24 18:00:00',
          endTime: '2025-02-25 08:00:00',
          campus: 'A校区',
          location: '学生活动中心A306',
          status: '正常在岗'
        }
      ];
      this.bCampusDutyList = [
        {
          name: '王五',
          phone: '13800138003',
          startTime: '2025-02-24 18:00:00',
          endTime: '2025-02-25 08:00:00',
          campus: 'B校区',
          location: '研究生楼B201',
          status: '正常在岗'
        }
      ];
      this.aCampusCount = this.aCampusDutyList.length;
      this.bCampusCount = this.bCampusDutyList.length;
    },
    makeCall(phone) {
      uni.makePhoneCall({
        phoneNumber: phone
      });
    },
    navigateToDutyStatus() {
      // 当前已经在值班页面，不跳转
    },
    navigateToMoreFunctions() {
      uni.navigateTo({
        url: '/pages/admin/more-functions'
      });
    }
  }
}
</script>

<style scoped>
.container {
  padding-bottom: 120rpx;
}

.nav-bar {
  display: flex;
  height: 88rpx;
  background-color: #007AFF;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.nav-title {
  color: white;
  font-size: 36rpx;
  font-weight: bold;
}

.nav-icon {
  width: 44rpx;
  height: 44rpx;
}

.date-selector {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  margin-top: 88rpx;
  background-color: white;
}

.date-icon {
  width: 40rpx;
  height: 40rpx;
}

.current-date {
  font-size: 32rpx;
  font-weight: bold;
}

.duty-list {
  margin-top: 20rpx;
}

.campus-section {
  background-color: white;
  margin-bottom: 20rpx;
}

.campus-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #f0f0f0;
}

.campus-title text {
  font-size: 28rpx;
  font-weight: bold;
}

.person-count {
  color: #007AFF;
}

.duty-items {
  padding: 20rpx;
}

.duty-item {
  border: 1px solid #e0e0e0;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.duty-item:last-child {
  margin-bottom: 0;
}

.duty-header {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}

.cert-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.person-name {
  font-size: 30rpx;
  font-weight: bold;
  flex: 1;
}

.call-icon {
  width: 40rpx;
  height: 40rpx;
}

.duty-info {
  background-color: #f8f8f8;
  border-radius: 8rpx;
  padding: 15rpx;
}

.info-text {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.info-text:last-child {
  margin-bottom: 0;
}

.nav-bar-bottom {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background-color: white;
  border-top: 1px solid #e0e0e0;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.nav-item.active .nav-text {
  color: #007AFF;
}

.nav-icon-bottom {
  width: 60rpx;
  height: 60rpx;
}

.nav-text {
  font-size: 24rpx;
  color: #888;
  margin-top: 8rpx;
}
</style>